<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th colspan="5">购物车</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="checked" @change="changeAllChecked()">全选
                    </td>
                    <td>商品名称</td>
                    <td>商品数量</td>
                    <td>商品单价</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(iphone,index) in list">
                    <td> <input type="checkbox" :value="iphone.name" v-model="checkList"></td>
                    <td>{{iphone.name}}</td>
                    <td><input type="text" v-model.number="iphone.num"></td>
                    <td>{{iphone.price}}</td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td></td>
                    <td>{{allNum}}件</td>
                    <td>{{allPrice}}元</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    checked: false,
                    checkList: [],
                    checkedArr: ['iphone 12', 'huawei p40 pro', 'mi 11'],
                    isCheckAll: false,
                    list: [
                        {
                            name: 'iphone 12',
                            price: 6000,
                            num: 2
                        },
                        {
                            name: 'huawei p40 pro',
                            price: 5000,
                            num: 6
                        }, {
                            name: 'mi 11',
                            price: 3000,
                            num: 2
                        },
                    ]
                }
            },
            computed: {
                allNum() {
                    let num = 0;
                    this.list.forEach(item => {
                        num += item.num;
                    })
                    return num;
                },
                allPrice() {
                    let price = 0;
                    this.list.forEach(item => {
                        price += item.price * item.num;
                    })
                    return price;
                },
            },
            methods: {
                del(index) {
                    //删除购物车中的某一项
                    this.list.splice(index, 1)
                },
                changeAllChecked: function () {
                    if (this.checked) {
                        this.checkList = this.checkedArr
                    } else {
                        this.checkList = []
                    }
                }
            },
            watch: {
                "checkedNames": function () {
                    if (this.checkList.length == this.checkedArr.length) {
                        this.checked = true
                    } else {
                        this.checked = false
                    }
                }
            }
        })
    </script>
</body>

</html>